import React, { PureComponent } from 'react'
import { connect } from 'react-redux'

import { Tabs, Row, Button, Form, Input, Select, Radio } from 'antd'
// antd用于创建表单域的类型声明
import { FormInstance } from 'antd/es/form'
// antd校验失败的方法声明
import { ValidateErrorEntity } from 'rc-field-form/lib/interface'

import AddProductMain from './components/AddProductMain'
import AddProductSpec from './components/AddProductSpec'
import AddProductTable from './components/AddProductTable'
import AddProductActiveForm from './components/AddProductActiveForm'

import Header from '@/commponents/common/Layout/Header'
import GlobalUpload from '@/commponents/common/GlobalUpload'

import { IProductState } from '@/types/product'
import { getTemplate } from '@/reducer/product'

import './style.less'

const { Item } = Form

/**
 * 添加页状态非常多而且管理起来各种繁琐比较麻烦，为了避免状态太过分散，这里使用类组件，
 * 类组件与函数组件的最大的区别之一：
 * 类组件由有限的（三个）生命周期管理所有的状态变化
 * 函数组件则为每一个状态配置一个状态生成器（useState），一个状态的生命周期（useEffect）
 * 在当前组件难以拆分且状态较多时，建议使用类组件；
 * 在当前状态比较方便拆分生命周期复杂状态较少时，建议使用函数组件。
 * 添加商品组件
 */
class AddProduct extends PureComponent<any, any> {
  formRef = React.createRef<FormInstance>()
  // state是在Component中声明过的，可以直接定义
  state = {
    // 上传图片时的loading
    loading: false,
    // 用于显示的图片
    image: '',
    // 用于显示的图片列表
    fileList: [],
    // 图片列表最大数量
    imagesMax: 10,

    // 是否单个规格
    specType: 0,
    // 是否展示动态表单
    showSpecActiveForm: false,
    // 是否展示多属性表格
    showMultiSpecTable: false,

    // tab的默认选中项
    defaultSelectedTab: 'productInfo',
  }

  componentDidMount() {
    this.props.getTemplate()
  }

  // ref等，如果没有使用constructor定义，则必须在定义时使用public或其它装饰器进行声明，否则会报错
  // ref在定义时，必须传入它的类型，否则也会报错
  public editRef = React.createRef<HTMLDivElement>()

  onFinish = (values: any) => {
    console.log(values, '表单校验通过')
  }

  validateFailed: (errorInfo: ValidateErrorEntity<any>) => void = ({
    values,
    errorFields,
    outOfDate,
  }) => {
    console.log(values, errorFields, outOfDate, '表单校验失败')
  }

  valuesChange = (changedValues: any, allValues: any) => {
    console.log(changedValues, '表单数据发生变化')
  }

  render() {
    const { template, category } = this.props
    return (
      <div className="center product add-product">
        <Header title="添加商品" />
        <Tabs defaultActiveKey={this.state.defaultSelectedTab}>
          {/* 商品详情 */}
          <Tabs.TabPane tab="商品信息" key="productInfo">
            {/* 这里可以直接引用components中的AddProductMain组件 */}
            <AddProductMain imagesMax={this.state.imagesMax}>
              <>
                {/* 规格选择，点击可以切换单规格或多规格 */}
                <AddProductSpec />
                {this.state.showSpecActiveForm && <AddProductActiveForm />}
                {this.state.showMultiSpecTable && <AddProductTable />}
              </>
            </AddProductMain>
          </Tabs.TabPane>
          {/* 详情编辑器 */}
          <Tabs.TabPane tab="商品详情" key="productDetail">
            <div ref={this.editRef} className="edit-wrap">
              编辑器页
            </div>
          </Tabs.TabPane>
          {/* 商品其它信息 */}
          <Tabs.TabPane tab="其它设置" key="otherInfo">
            <Button type="primary">添加商品</Button>
          </Tabs.TabPane>
        </Tabs>
      </div>
    )
  }
}

// 从redux中获取数据
// 商品分类信息
// 运费模板
export default connect(
  // IProductState中定义了这个接口中有哪些状态，所以我们可以直接返回这个状态中定义过的属性
  (state: { productInfo: IProductState }) => {
    console.log(state.productInfo)
    return {
      category: state.productInfo.productCategory.map(item => ({
        label: item.cate_name,
        value: item.id,
      })),
      template: state.productInfo.templateList.map(item => ({
        label: item.name,
        value: item.id,
      })),
    }
  },
  { getTemplate }
)(AddProduct)
